<template>
	<view class="content">
		<p class="statusTitle">
			<text v-if="orderDetail.status=='2'">待发货</text>
			<text v-if="orderDetail.status=='4'">待收货</text>
			<text v-if="orderDetail.status=='8'">已完成</text>
		</p>
		<view class="order-item">
			<view class="order-header">
				<text class="order-id">订单编号：{{orderDetail.orderNo}}</text>
				<text class="order-status" v-if="orderDetail.status=='2'">待发货</text>
				<text class="order-status" v-if="orderDetail.status=='4'">待收货</text>
				<text class="order-status" v-if="orderDetail.status=='8'">已完成</text>
			</view>
			<view class="product-info">
				<image :src="orderDetail.goodsList[0].msqGoods.picture" class="product-image"></image>
				<view class="product-details">
					<view class="product-name">{{orderDetail.goodsList[0].productName}}
					</view>
					<view class="product-commodity">
						<!-- {{orderDetail.goodsList[0].msqGoods.blurb}} -->
					</view>
					<view class="product-price-specs">
						<text class="product-price">￥{{orderDetail.goodsList[0].msqGoodsAttrValue.price}}</text>
						<text class="product-specs">×{{orderDetail.goodsList[0].buyNumber}}</text>
					</view>
					<view class="quantity-total" style="text-align: right;">
						<text>共计{{orderDetail.goodsList[0].buyNumber}}件商品,</text>
						<text>合计：￥<text style="color: #000;">{{orderDetail.payMoney}}</text></text>
					</view>
				</view>
			</view>

		</view>
		<view class="contentBox">
		<!-- 	<p class="contentTitle">券码信息</p>
			<image class="hxCode" :src="orderDetail.goodsList[0].qrCode" mode=""></image>
			<p style="width: 100%;border: 1px solid #DEDEDE;"></p> -->
			<p class="contentTitle">订单信息</p>
			<p class="leftTitle">商品总价</p>
			<p class="rightContent">￥{{orderDetail.payMoney}}</p>
			<p class="leftTitle">实付款</p>
			<p class="rightContent">￥{{orderDetail.payMoney}}</p>
			<p class="leftTitle">订单编号</p>
			<p class="rightContent">{{orderDetail.orderNo}}</p>
			<p class="leftTitle">支付方式</p>
			<p class="rightContent">{{orderDetail.payType == 0 ? '微信' : orderDetail.payType == 1 ? '余额' : '未知'}}</p>
			<p class="leftTitle">下单时间</p>
			<p class="rightContent">{{orderDetail.createTime}}</p>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail
	} from '@/api/order.js';
	export default {
		data() {
			return {
				id: '',
				orderDetail: {}
			}
		},
		onLoad(options) {
			console.log('options:', options);
			this.id = options.orderId
		},
		onShow() {
			getOrderDetail(this.id).then(res => {
				this.orderDetail = res.data
				// this.orderDetail.goodsList[0].msqGoods.blurb = res.data.goodsList[0].msqGoods.blurb.replace(/\<img/g,
				// 	'<img style="max-width:100%;height:auto"');
			})
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss'; // 导入全局 SCSS 变量文件

	.content {
		min-height: 100vh;
		padding: 20rpx;
		background-color: #F8F8F8;
		position: relative;
	}

	.statusTitle {
		font-weight: bold;
		font-size: 50rpx;
		color: #333333;
		line-height: 40rpx;
		margin: 40rpx 0rpx;
	}

	.order-item {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.order-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			color: #666666;

			.order-id,
			.order-status {
				font-size: 28rpx;
			}
		}

		.product-info {
			display: flex;

			.product-image {
				width: 180rpx;
				height: 180rpx;
				margin-right: 20rpx;
			}

			.product-details {
				flex-grow: 1;

				.product-name {
					font-size: 30rpx;
					line-height: 1.5;
					font-weight: bold;
					max-height: 96rpx; // 两行的高度
					overflow: hidden;
				}

				.product-commodity {
					font-size: 24rpx;
					color: #777;
				}

				.product-price-specs {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;

					.product-price {
						font-weight: bold;
					}

					.product-specs {
						color: #777;
					}
				}

				.quantity-total {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #777;
				}
			}
		}


	}

	.contentBox {
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;

		.contentTitle {
			width: 100%;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 40rpx;
			margin: 20rpx 0rpx;
		}
		.hxCode{
			width: 300rpx;
			height: 300rpx;
			margin: 20rpx auto;
		}
		.leftTitle {
			width: 30%;
			height: 60rpx;
			text-align: left;
		}

		.rightContent {
			width: 70%;
			text-align: right;
		}
	}

	.order-actions {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 10;
		padding: 20rpx 0rpx;

		.button {
			display: inline-block;
			width: auto;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			border-radius: 50rpx;
			border: 2rpx solid #000;
			padding: 0 30rpx;
			margin-right: 20rpx;
		}
	}
</style>